<template>
  <div>
    <h3>crm管理/客户管理/客户详情</h3>
    <el-container>
      <el-aside align="center" style="background-color: white;width: 210px;">
        <el-image
          style="width: 150px; height: 220px;"
          :src="src"
          fit="scale-down"
        >
        </el-image>
      </el-aside>
      <el-main>
        <el-descriptions title="客户信息">
          <el-descriptions-item label="客户编号">{{queryParams.customerNo}}</el-descriptions-item>
          <el-descriptions-item label="对接员工">{{queryParams.empName}}</el-descriptions-item>
          <el-descriptions-item label="客户联系人">{{queryParams.customerContact}}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{queryParams.customerPhone}}</el-descriptions-item>
          <el-descriptions-item label="公司名称">{{queryParams.customerCompany}}</el-descriptions-item>
          <el-descriptions-item label="公司地址">{{queryParams.customerAddress}}</el-descriptions-item>
          <el-descriptions-item label="客户渠道" >
              <el-table :data="customerList" :show-header="false">
                <el-table-column label="" align="center" prop="customerFrom" width="80" :formatter="formatFrom" :show-overflow-tooltip="true" />
              </el-table>
          </el-descriptions-item>
          <el-descriptions-item label="客户类型" >
            <el-table :data="customerList1" :show-header="false">
              <el-table-column label=""
                               align="center"
                               prop="customerTypeId"
                               width="80"
                               :formatter="formatType"
                               :show-overflow-tooltip="true" />
            </el-table>
          </el-descriptions-item>
          <el-descriptions-item label="客户状态" >
            <el-table :data="customerList2" :show-header="false">
              <el-table-column label=""
                               align="center"
                               prop="customerStatusId"
                               width="80"
                               :formatter="formatStatus"
                               :show-overflow-tooltip="true" />
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </el-main>
    </el-container>


    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="人员信息" name="first">
              <el-table v-loading="loading" :data="applicantList" >
                <el-table-column label="申请人" align="center" prop="applicantName" />
                <el-table-column label="联系电话" align="center" prop="applicantNo" />
                <el-table-column label="专利名称" align="center" prop="patendName" />
                <el-table-column label="专利类型" align="center" prop="patendTypeId" :formatter="formatPatentType" />
              </el-table>
              <el-divider></el-divider>
              <el-table v-loading="loading" :data="inventorList" >
                <el-table-column label="发明人" align="center" prop="inventorName"  />
                <el-table-column label="联系电话" align="center" prop="inventorNo"  />
                <el-table-column label="专利名称" align="center"  prop="patendName"/>
                <el-table-column label="专利类型" align="center"  prop="patendTypeId" :formatter="formatPatentType"/>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="案件信息" name="second">
              <el-table v-loading="loading" :data="caseList" >
                <el-table-column label="案件编号" align="center" prop="caseNo"  />
                <el-table-column label="案件状态" align="center" prop="caseStatusId" :formatter="formatCaseStatusId" />
                <el-table-column label="撰稿员名称" align="center"  prop="nickName"/>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="合同信息" name="third">
              <el-table v-loading="loading" :data="contractList" >
                <el-table-column label="合同编号" align="center" prop="contractNo"  />
                <el-table-column label="业务类型" align="center" prop="contractCaseTypeId"  :formatter="formatContractCaseTypeId"/>
                <el-table-column label="合同状态" align="center"  prop="contractStatusId"  :formatter="formatContractStatusId"/>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="客户跟踪" name="fourth">
              <div class="radio">
                排序：
                <el-radio-group v-model="reverse">
                  <el-radio :label="true">倒序</el-radio>
                  <el-radio :label="false">正序</el-radio>
                </el-radio-group>
              </div>
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in trackingList"
                  :key="index"
                  :timestamp="activity.createTime">
                  <p class="timeline-name">{{activity.trackingMsg}}</p>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>

          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getCustomer, getInventor, getApplicant, getContract, getCase,getTrackingMsg} from "../../../api/crm/crm";

  export default {
    dicts: ["ipms_customer_from", "ipms_customer_type", "ipms_customer_status","ipms_patend_type","ipms_contract_case_type","ipms_contract_status","ipms_case_status"],
    data() {
      return {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        customerList: [{customerFrom:0}],
        customerList1:[{customerTypeId:0}],
        customerList2:[{customerStatusId:0}],
        activeName: 'first',
        queryParams: {
          customerNo: null,
          customerFromId: null,
          customerContact: null,
          customerPhone: null,
          customerEmail: null,
          customerCompany: null,
          customerTypeId: null,
          customerAddress: null,
          userId: null,
          customerExperience: null,
          customerStatusId: null,
          empName:null,
        },
        applicantparams:{
          customerId:null,
          inventorName:null,
          inventorNo:null,
          patendName:null,
          patendTypeId:null
        },
        reverse: true,
        //案件信息表格书记
        trackingList: [{}],
        // 遮罩层
        loading: true,
        form: {},
        //申请人表格数据
        applicantList:[],
        //发明人表格数据
        inventorList:[],
        //合同信息表格数据
        contractList:[],
        //案件信息列表
        caseList:[],
      }
    },
    created() {
      this.getCustomerDetails();
      this.getInventorList();
    },
    methods: {
      //格式化字典参数
      formatFrom(row) {
        return this.selectDictLabel(this.dict.type.ipms_customer_from, row.customerFrom)
      },
      formatType(row) {
        return this.selectDictLabel(this.dict.type.ipms_customer_type, row.customerTypeId)
      },
      formatStatus(row) {
        return this.selectDictLabel(this.dict.type.ipms_customer_status, row.customerStatusId)
      },
      formatPatentType(row) {
        return this.selectDictLabel(this.dict.type.ipms_patend_type, row.patendTypeId)
      },
      formatContractCaseTypeId(row) {
        return this.selectDictLabel(this.dict.type.ipms_contract_case_type, row.contractCaseTypeId)
      },
      formatContractStatusId(row) {
        return this.selectDictLabel(this.dict.type.ipms_contract_status, row.contractStatusId)
      },
      formatCaseStatusId(row) {
        return this.selectDictLabel(this.dict.type.ipms_case_status, row.caseStatusId)
      },
      getCustomerDetails() {
        const Id=this.$route.query.data.customerId;
        getCustomer(Id).then(response => {
          this.customerList[0].customerFrom = response.data.customerFromId;
          this.customerList1[0].customerTypeId=response.data.customerTypeId;
          this.customerList2[0].customerStatusId=response.data.customerStatusId;
          this.queryParams=response.data;
          this.total = response.total;
          this.loading = false;
        })
      },
      handleClick(tab, event){
      },
      getInventorList(){
        const Id=this.$route.query.data.customerId;
        getInventor(Id).then(response => {
          this.inventorList=response.rows;
          this.loading = false;
        });
        getApplicant(Id).then(response => {
          this.applicantList=response.rows;
          this.loading = false;
        });
        getContract(Id).then(response => {
          this.contractList=response.rows;
          this.loading = false;
        });
        getCase(Id).then(response => {
          this.caseList=response.rows;
          this.loading = false;
        });
        getTrackingMsg(Id).then(response => {
          this.trackingList=response.rows;
          console.log(this.trackingList)
        });
      },
    }
  }
</script>

<style lang="stylus" scoped>

</style>
